<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册</title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/js/crypto-js.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>

<body style="background: url(http://www.cduestc.cn/eams/static/images/education-bg.png) no-repeat top center;">

<div class="layui-container container" style="height: 100vh">
    <div style="height: 500px;display: flex;flex-direction: column;align-items: center;background-color: beige;border-radius: 30px;justify-content: center">
        <h1 style="font-size: 30px;font-weight: bold">请注册</h1>
        <input class="layui-input" type="text" id="name" placeholder="用户名"
               style="width: 400px;margin-top: 30px"/>
        <input class="layui-input" type="text" id="account" placeholder="账号"
               style="width: 400px;margin-top: 30px"/>
        <input class="layui-input" type="password" id="password" placeholder="密码"
               style="width: 400px;margin-top: 30px"/>
        <input class="layui-input" type="text" id="phone" placeholder="电话号码"
               style="width: 400px;margin-top: 30px"/>
        <input class="layui-input" type="text" id="qq" placeholder="qq号"
               style="width: 400px;margin-top: 30px"/>
        <input class="layui-input" type="date" id="birth" placeholder="qq号"
               style="width: 400px;margin-top: 30px"/>
        <div style="margin-top: 30px;display: flex;flex-direction: column; width: 400px">
            <a href="/ss/login" style="cursor: pointer;width: fit-content">存在账号? 点击登录</a>
            <button class="layui-btn" onclick="register()">注册</button>
        </div>
        <p style="color: red;margin-top: 10px;font-size: 15px" id="info"></p>
    </div>
</div>

<script type="text/javascript">
    function register() {
        var name = document.getElementById('name').value
        var account = document.getElementById('account').value
        var password = document.getElementById('password').value
        var phone = document.getElementById('phone').value
        var qq = document.getElementById('qq').value
        var birth = document.getElementById('birth').value
        if (isEmpty(name) || isEmpty(account) || isEmpty(password) || isEmpty(phone) || isEmpty(qq)) {
            alert('请填写全部信息')
            return
        }
        var regex = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (phone.length !== 11 || !regex.test(phone)) {
            alert('请输入正确的电话号码')
            return
        }
        var user = {
            'name': name,
            'account': account,
            'password': CryptoJS.SHA1(password).toString(),
            'role': 'student',
            'face': '/ss/static/images/default.png',
            'phone': phone,
            'qq': qq,
            'birth': birth
        }
        $.ajax({
            url: '/ss/api/user',
            type: 'post',
            data: JSON.stringify(user),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) window.location = '/ss/login'
                else alert('注册失败')
            },
            error: function () {
                alert('注册失败, 账号重复')
            }
        })
    }

    function isEmpty(obj) {
        return typeof obj == "undefined" || obj == null || obj === "";
    }
</script>
</body>

</html>